<template>
  <div class="wrapLimit clx main">
    <div>
      <div class="transportCapacityRecord">
        <!-- isCarrier {{isCarrier}} -->
        <el-form ref="inputModel" :model="data" label-width="90px" class="form-baseinfo">
          <div class="auditInfo">
            <p class="title">下单基本信息</p>
            <div class="info">
              <el-form-item label="退货单号:" prop="userName">
                <span> {{ data.orNo }}</span>
              </el-form-item>
              <el-form-item label="订单状态:" prop="">
                {{ data.statusName }}
              </el-form-item>
              <el-form-item label="退款金额:" prop="userCardNo">
                {{ data.orMoney }}
              </el-form-item>
              <el-form-item label="退款时间:" prop="userCardNo">
                {{ data.orTime }}
              </el-form-item>
              <el-form-item label="创建时间:" prop="userName">
                <span>{{ data.createTime }}</span>
              </el-form-item>
              <el-form-item label="备注:" prop="userCardNo">
                <span>{{ data.remark }}</span>
              </el-form-item>
              <div class="divide" />
              <el-form-item label="员工姓名:" prop="userName">
                <span>{{ data.userName }}</span>
                <!-- <el-input readonly v-model=""></el-input> -->
              </el-form-item>
              <el-form-item label="员工工号:" prop="">
                <span>{{ data.userJobNum }}</span>
                <!-- <el-input readonly></el-input> -->
              </el-form-item>
              <el-form-item label="员工卡号:" prop="userCardNo">
                <span>{{ data.userCardNo }}</span>
                <!-- <el-input readonly v-model="data.userCardNo"></el-input> -->
              </el-form-item>
              <el-form-item label="联系电话:" prop="userMobile">
                <span>{{ data.userMobile }}</span>
                <!-- <el-input readonly v-model="data.userMobile"></el-input> -->
              </el-form-item>
              <el-form-item label="所属部门:" prop="departmentName">
                <span>{{ data.departmentName }}</span>
                <!-- <el-input readonly v-model="data.departmentName"></el-input> -->
              </el-form-item>
              <el-form-item label="员工岗位:" prop="jobName">
                <span>{{ data.jobName }}</span>
                <!-- <el-input readonly v-model="data.jobName"></el-input> -->
              </el-form-item>
            </div>
          </div>
        </el-form>

        <el-form ref="ordersProducts" :inline="true" label-width="90px" class="form-baseinfo">
          <div class="auditInfo">
            <p class="title">产品信息</p>
            <div class="info">
              <LPTablePage
                :show-index="false"
                :show-indexfixed="false"
                index-label="序号"
                :table-data="tableData"
                :table-column="tableColumn"
                :total="total"
                :current-page="currentPage"
                :show-page="false"
                align="center"
              >
                <template slot="couponName" slot-scope="{ row }">
                  <div v-for="(item, index) in row.couponModels" :key="index">
                    <el-link type="primary" @click="goToCouponManage(item.couponId)">{{ item.couponName }}</el-link>
                  </div>
                </template>
                <template slot="couponRecordId" slot-scope="{ row }">
                  <div v-for="(item, index) in row.couponModels" :key="index">
                    <div>{{ item.recordId }}</div>
                  </div>
                </template>
                <template slot="actualORPCount" slot-scope="{ row }">
                  <div v-if="data.status == 4">{{ row.actualORPCount }}</div>
                </template>
                <template slot="soNo" slot-scope="{ row }">
                  <el-link type="primary" @click="clickSoNO(row)">{{ row.soNo }}</el-link>
                </template>
              </LPTablePage>
            </div>
          </div>
          <span class="collect">汇总：一共{{ tableCount }}件商品，总金额{{ totalMoney }}元</span>
        </el-form>

        <el-form ref="ordersProducts" :inline="true" label-width="90px" class="form-baseinfo">
          <div class="auditInfo">
            <p class="title">操作日志</p>
            <div class="info">
              <LPTablePage
                :show-index="false"
                :table-data="logData"
                :table-column="logColumn"
                :show-page="false"
                align="center"
              />
            </div>
          </div>
          <div class="auditInfo">
            <p class="title">审核意见</p>
            <div class="info">
              <el-input v-model="auditRemarks" />
            </div>
          </div>
          <div class="auditInfo">
            <el-button class="button" size="medium" @click="Save(0)">驳回</el-button>
            <el-button class="button" size="medium" type="primary" @click="Save(1)">审核通过</el-button>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { auditReturnOrder, getByIdReturnOrder } from '@/api/LaborProtection/returnOrder'
import { closeActiveTag } from '@/utils/lpUtils.js'
import { operationLog } from '@/api/LaborProtection/operationLog'
import { getByIdOrderData } from '@/api/LaborProtection/order'
import LPTablePage from '@/components/LPTablePage/index.vue'

export default {
  name: 'OrderExamineDetail',
  components: { LPTablePage },
  data() {
    return {
      data: {},
      tableData: [],
      tableColumn: [
        { label: '物料类型', prop: 'pClassName' },
        { label: '物料编码', prop: 'pNo' },
        { label: '物料名称', prop: 'pTitle', width: 170 },
        { label: '单位', prop: 'pUnit', width: 60 },
        { label: '数量', prop: 'orpCount', width: 60 },
        { label: '单价', prop: 'pPrice', width: 60 },
        { label: '退款金额', prop: 'orpMoney', width: 80 },
        { label: '购买日期', prop: 'soTime' },
        { label: '关联订单', prop: 'soNo', render: true },
        { label: '优惠券名称', prop: 'couponName', width: 180, render: true },
        { label: '发放记录编号', prop: 'couponRecordId', width: 200, render: true },
        { label: '实际退货数量', prop: 'actualORPCount', width: 120, render: true }
      ],
      logData: [],
      logColumn: [
        { label: '操作时间', prop: 'createTime' },
        { label: '操作人', prop: 'createName' },
        { label: '操作内容', prop: 'remark' }
      ],
      total: 0,
      currentPage: 1,
      pageSize: 10,
      tableCount: 0,
      totalMoney: 0,
      id: '',
      auditRemarks: ''
    }
  },
  mounted() {
    this.getByIdReturnOrder()
    this.operationLog()
  },
  methods: {
    goToCouponManage(id) {
      this.$router.push({
        path: '/laborProtection/couponManage',
        query: {
          data: JSON.stringify({
            id: id,
            back: '/laborProtection/order/returnOrderManage/orderExamine/detail',
            backData: this.$route.query.data
          })
        }
      })
    },
    operationLog() {
      const params = {
        SourceId: this.id
      }
      operationLog(params).then((res) => {
        this.logData = res.items
      })
    },
    getByIdReturnOrder() {
      const query = JSON.parse(this.$route.query.data)
      this.id = query.id

      getByIdReturnOrder(this.id).then((res) => {
        this.data = res
        this.tableData = res.ordersReturnProducts
        res.ordersReturnProducts.forEach((item) => {
          this.totalMoney = this.totalMoney + item.orpMoney
          this.tableCount = this.tableCount + item.orpCount
        })
      })
    },
    handleSearchSubmit() {
      this.currentPage = 1
    },
    handleSearchReset() {
      this.handleSearchSubmit()
    },
    handleSizeChange(v) {
      this.pageSize = v
      this.currentPage = 1
    },
    handleCurrentChange(v) {
      this.currentPage = v
    },
    Save(type) {
      const data = {
        id: this.id,
        remark: this.auditRemarks
      }
      if (type) {
        data.status = 1
      } else {
        data.status = 0
      }

      auditReturnOrder(data).then((res) => {
        if (type) {
          this.$message.success('审核通过')
        } else {
          this.$message.success('驳回成功')
        }
        this.close()
      })
    },
    clickSoNO(row) {
      getByIdOrderData(row.ordersId).then((res) => {
        if (res.soType == 1) {
          this.$router.push({
            path: '/laborProtection/order/detail',
            query: {
              data: JSON.stringify({
                id: row.ordersId,
                isAudit: false,
                returnOrderId: this.id,
                returnExamine: true
              })
            }
          })
        } else {
          this.$router.push({
            path: '/remoteOrder/components/detail',
            query: {
              data: JSON.stringify({
                id: row.ordersId,
                isDetail: true,
                returnOrderId: this.id,
                returnExamine: true
              })
            }
          })
        }
      })
    },
    close() {
      closeActiveTag(this, '/laborProtection/order/returnOrderManage/orderExamine')
    }
  }
}
</script>

<style lang="scss" scoped>
.transportCapacityRecord {
  .form-baseinfo {
    margin: 0 45px;
    ::v-deep .el-divider {
      margin-top: 10px;
    }

    .title {
      font-size: 16px;
      font-weight: 550;
    }
  }

  ::v-deep .el-form-item__label {
    font-weight: normal;
    color: #666666;
    line-height: 12px;
  }

  ::v-deep .el-form-item__content {
    line-height: 12px;
  }
}
::v-deep .el-form-item {
  height: 40px;
  margin-bottom: 2px;
}
::v-deep .el-input__inner {
  height: 90px;
}
.auditInfo {
  .info {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    // margin: 0 45px;
    border-bottom: 1px solid #ededed;

    .el-form-item {
      width: calc(33%);
      height: 40px;
    }
  }
  .divide {
    width: 100%;
    margin-top: 30px;
  }
}
.collect {
  display: block;
  padding-left: 20px;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #f2f3f5;
}
.title {
  margin-left: 10px;
  padding: 20px 0 20px 0;
  font-size: 18px;
  &::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    position: absolute;
    left: 45px;
    background: #0076ff;
  }
}

.log {
  .title {
    padding-bottom: 30px;
  }
}

.auditInfo {
  .button {
    width: 100px;
    position: relative;
    left: 45%;
    top: 30px;
    margin: 0 40px;
    transform: translate(-50%);

    &:nth-of-type(1) {
      color: #333333;
      background-color: #fff;
    }
  }
}
</style>
